<template>
	<view :style="{'background-color':pageBg}" class="css-theme"
			:class="[cueTheme]" style="float: left;width: 100%;min-height: 100%;">

		<u-navbar is-back="true" :border-bottom="false"  title-color="" back-icon-color="" title="集赞">
		</u-navbar>
		<view class="top_box"
			style="font-weight: bolder;text-align: center;margin-top: 10px;margin-bottom:5px;font-size: 16px;">
			活动规则
		</view>
		<view style="margin-top: 60rpx;width: 90%;font-size: 26rpx;margin-left: 5%;" >
			<rich-text type="text" :nodes="content"></rich-text>
		</view>
		
		<!-- 
		<view style="padding: 40rpx;">
			<view class="activity">活动奖励</view>
			<view>1、点赞数>=50，得永久会员！</view>
			<view class="activity">活动对象</view>
			<view>1、所有非会员用户</view>
			<view class="activity">参与方式</view>
			<view>1、发抖音/小红书图文或视频，内容与拾光记相关即可，图文需要超过50字+3张以上配图，视频需15s以上</view>
			<view>2、应用市场五星好评，加速审核</view>
			<view class="activity">注意事项</view>
			<view>1、每人仅限参与一次，取关、隐藏、删除作品奖励会被收回</view>
			<view>2、符合条件请联系客服V：MMKJSH</view>
			
		</view> -->
		
		<!-- <view class="top_box"
			style="font-weight: bolder;text-align: center;margin-top: 10px;margin-bottom:5px;font-size: 16px;">
			领取奖励
		</view>
		<view class="container">
			<view class="top_box">
				<view class="container_box   css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<view class="tn-icon-my"></view>
						<text>|</text>
						<input  v-model="account" type="text" maxlength="200" placeholder="账号ID(必填)" placeholder-class="placeholder_style" />
					</view>
				</view>
				<view class="container_box   css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<view class="tn-icon-like"></view>
						<text>|</text>
						<input  v-model="loves" type="text" maxlength="200" placeholder="当前点赞数量>=50(必填)" placeholder-class="placeholder_style" />
					</view>
				</view>
				<view class="container_box   css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<view class="tn-icon-link"></view>
						<text>|</text>
						<input  v-model="url" type="text" maxlength="200" placeholder="文章/视频链接(必填)" placeholder-class="placeholder_style" />
					</view>
				</view>
				<view class="container_box   css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<view style="font-size: 14px;">应用商店好评</view>
						<tn-switch style="margin-left: 10px;" v-model="good" :size="30"
							activeColor="#18B998"></tn-switch>
					</view>
				</view>
			</view>
			<view style="float: left;width: 100%;margin-top: 40rpx;">
				<button @click="saveData()" style="border-radius: 30px;background-color:#5A9CFC ;color:white;font-weight: bolder;">保存</button>
			</view>
		</view> -->
	</view>
</template>
<script>
	var _self
	var graceRichText = require("store/richText.js");
	export default {
		data() {
			return {
				id: '',
				userId: '',
				url: '',
				loves: '',
				account: '',
				type: 0,
				good: false,
				content: '',
				user:[]
			};
		},
		destroyed() {
		},
		onLoad(options) {
			_self = this
			_self.userId = options.userId
			if (options.id != 0) {
				_self.type = 1
				
			}
			

		},
		onShow() {
			
			uni.getStorage({
				key: 'user',
				success: function(res) {
					console.log(res)
					if (res.data) {
						_self.user = res.data
						
						_self.getCommonInfo()
		
					}
				},
				fail: function(e) {
					console.log(e)
					uni.redirectTo({
						url: '../login/login'
					});
				}
			})
		
		},
		methods: {
			
			getCommonInfo() {
				var data = {
					userId: _self.user.id
				}
				this.$api.commonInfo(data).then((res) => {
					var resData = res;
			
					if (resData.code == "200") {
						console.log(resData.data[0].info4)
						_self.content = graceRichText.format(resData.data[0].info4);
			
					}
				})
			
			},
			saveData() {
				if (_self.account == '') {
					uni.showToast({
						title: "请输入账号ID",
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (_self.loves == '') {
					uni.showToast({
						title: "请输入点赞数量",
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (_self.url == '') {
					uni.showToast({
						title: "请输入地址",
						duration: 2000,
						icon: "none"
					});
					return;
				}
				var appgood = 0;
				if (_self.good) {
					appgood = 1;
				}
				var data = {
					userId: _self.userId,
					url: _self.url,
					loves:_self.loves,
					account: _self.account,
					remark: _self.appgood,
				}
			
				
				this.$api.updateLink(data).then((res) => {
					var resData = res
					if (resData.code == "200") {
						uni.showToast({
							title: '保存成功',
							duration: 2000,
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1 // 默认值是1，表示返回的页面层数
						});
					} else {
						uni.showToast({
							title: '保存失败',
							duration: 2000,
							icon: 'none'
						})
					}
				})
				
			},




		}
	};
</script>

<style lang="scss">
	page {
			height: 100%;
			width: 100%;
			margin: 0;
			background-color: $page-bg !important;
		}
		
		.css-theme {
			@include text-color();
			@include base-background();
			@include border-color();
			@include shadow-color();
		}

	.container {
		padding: 0rpx 20rpx 20rpx 20rpx;
		width: 94%;
		float: left;
		margin-left: 3%;
		margin-top: 10rpx;
		// background-color: #ffffff;
		border-radius: 5px;

	}

	.top_box {
		float: left;
		width: 100%;

	}

	.input-container {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.label {
		width: 100px;
		font-size: 16px;
	}


	.textarea-container {
		display: flex;
		flex-direction: column;
		// border: 1px solid #f1f1f1;
		border-radius: 8px;
	}

	.textarea {
		height: 120px;
		
		border-radius: 8px;
		padding: 10px;
		font-size: 16px;
		width: 100%;
	}

	.fixed-image {
		position: fixed;
		right: 20px;
		/* 可根据需要调整位置 */
		bottom: 20px;
		/* 可根据需要调整位置 */
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.fixed-image image {
		width: 80rpx;
		height: 80rpx;
	}


	.container_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		// border: 1px solid #f1f1f1;
		margin: 16rpx 0rpx;
		border-radius: 8px;
		line-height: 25px;
		font-size: 18px;
		// color: #56555B;
	}

	.container_box_left {
		display: flex;
		align-items: center;
		float: left;
		width: 100%;
	}

	.container_box_left input {
		width: 100%;
		float: left;
	}

	.container_box_left image {
		width: 20px;
		height: 20px;
	}

	.container_box_left text {
		// color: #f1f1f1;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.placeholder_style {
		// color: #ccc;
		font-size: 14px;
	}
	.activity{
		font-weight: bolder;color:#5A9CFC;font-size: 16px;
		margin: 5px 0px 5px 0px;
	}
</style>